<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代办清单小程序 - UI设计图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: #f5f6fa;
            color: #2d3436;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* 顶部排序栏 */
        .sort-bar {
            padding: 15px 20px;
            background: #fff;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 15px;
        }

        .sort-btn {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: white;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }

        .sort-btn:hover {
            background: #f0f0f0;
        }

        /* 任务列表区域 */
        .task-list {
            padding: 20px;
        }

        .task-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
        }

        .delete-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 24px;
            height: 24px;
            border: none;
            background: none;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.3s;
        }

        .delete-btn:hover {
            color: #e53935;
            transform: scale(1.1);
        }

        /* 删除确认模态框样式 */
        .confirm-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .confirm-modal .modal-content {
            background: white;
            padding: 25px;
            border-radius: 16px;
            width: 90%;
            max-width: 400px;
            text-align: center;
        }

        .confirm-modal h3 {
            margin-bottom: 15px;
            color: #2d3436;
            font-size: 18px;
        }

        .confirm-modal p {
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }

        .task-info {
            flex: 1;
        }

        .task-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .task-meta {
            font-size: 12px;
            color: #666;
            display: flex;
            gap: 10px;
        }

        /* 优先级标签 */
        .priority {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .priority-high {
            background: #ffebee;
            color: #e53935;
        }

        .priority-medium {
            background: #fff3e0;
            color: #fb8c00;
        }

        .priority-low {
            background: #e8f5e9;
            color: #43a047;
        }

        /* 控制中心 */
        .control-center {
            position: fixed;
            right: 30px;
            bottom: 30px;
            width: 60px;
            height: 60px;
            background: #4834d4;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(72, 52, 212, 0.4);
            transition: all 0.3s;
        }

        .control-center:hover {
            transform: scale(1.1);
        }

        /* 任务状态标签 */
        .status {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .status-todo {
            background: #e3f2fd;
            color: #1976d2;
        }

        .status-doing {
            background: #e0f7fa;
            color: #00acc1;
        }

        .status-done {
            background: #f1f8e9;
            color: #7cb342;
        }

        /* 模态框样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .modal h2 {
            margin-bottom: 20px;
            color: #2d3436;
            font-size: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #2d3436;
            font-size: 14px;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }

        .form-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .form-buttons button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .form-buttons button[type="submit"] {
            background: #4834d4;
            color: white;
        }

        .form-buttons button[type="submit"]:hover {
            background: #3c2bb3;
        }

        .form-buttons .cancel-btn {
            background: #f5f6fa;
            color: #2d3436;
        }

        .form-buttons .cancel-btn:hover {
            background: #dcdde1;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 排序栏 -->
        <div class="sort-bar">
            <button class="sort-btn">按时间排序</button>
            <button class="sort-btn">按优先级排序</button>
            <button class="sort-btn">按状态排序</button>
        </div>

        <!-- 任务列表 -->
        <div class="task-list" id="taskList">
            <!-- 任务卡片模板 -->
            <div class="task-card">
                <div class="task-info">
                    <div class="task-title">示例任务</div>
                    <div class="task-meta">
                        <span class="priority priority-high">高优先级</span>
                        <span class="status status-todo">待办</span>
                        <span>2023-12-25</span>
                    </div>
                </div>
                <button class="delete-btn" onclick="showDeleteConfirm(this)">&times;</button>
            </div>
        </div>

        <!-- 删除确认模态框 -->
        <div class="confirm-modal" id="deleteModal" style="display: none;">
            <div class="modal-content">
                <h3>确认删除</h3>
                <p>确定要删除这个任务吗？此操作不可撤销。</p>
                <div class="modal-buttons">
                    <button onclick="confirmDelete()" style="background: #e53935; color: white; border: none; padding: 8px 20px; border-radius: 4px; margin-right: 10px; cursor: pointer;">确认删除</button>
                    <button onclick="cancelDelete()" style="background: #f5f5f5; color: #666; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer;">取消</button>
                </div>
            </div>
        </div>

        <script>
            let currentTaskToDelete = null;

            function showDeleteConfirm(deleteBtn) {
                currentTaskToDelete = deleteBtn.closest('.task-card');
                document.getElementById('deleteModal').style.display = 'flex';
            }

            function confirmDelete() {
                if (currentTaskToDelete) {
                    // 从DOM中移除任务卡片
                    currentTaskToDelete.remove();
                    // 更新本地存储中的任务列表
                    updateLocalStorage();
                }
                cancelDelete();
            }

            function cancelDelete() {
                document.getElementById('deleteModal').style.display = 'none';
                currentTaskToDelete = null;
            }

            function updateLocalStorage() {
                const taskCards = document.querySelectorAll('.task-card');
                const tasks = Array.from(taskCards).map(card => {
                    return {
                        title: card.querySelector('.task-title').textContent,
                        priority: card.querySelector('.priority').textContent,
                        status: card.querySelector('.status').textContent,
                        date: card.querySelector('.task-meta span:last-child').textContent
                    };
                });
                localStorage.setItem('tasks', JSON.stringify(tasks));
            }
        </script>
    </div>

    <!-- 控制中心按钮 -->
    <div class="control-center">+</div>
    <script>
        // 任务数据管理
        class TaskManager {
            constructor() {
                this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
                this.init();
            }

            init() {
                // 初始化事件监听
                this.initSortButtons();
                this.initControlCenter();
                this.renderTasks();
            }

            // 初始化排序按钮
            initSortButtons() {
                const sortButtons = document.querySelectorAll('.sort-btn');
                sortButtons.forEach(button => {
                    button.addEventListener('click', () => {
                        const sortType = button.textContent;
                        this.sortTasks(sortType);
                    });
                });
            }

            // 初始化控制中心按钮
            initControlCenter() {
                const controlCenter = document.querySelector('.control-center');
                controlCenter.addEventListener('click', () => {
                    this.showAddTaskModal();
                });
            }

            // 添加任务
            addTask(task) {
                this.tasks.push({
                    id: Date.now(),
                    ...task,
                    createdAt: new Date().toISOString()
                });
                this.saveTasks();
                this.renderTasks();
            }

            // 保存任务到localStorage
            saveTasks() {
                localStorage.setItem('tasks', JSON.stringify(this.tasks));
            }

            // 渲染任务列表
            renderTasks() {
                const taskList = document.querySelector('.task-list');
                taskList.innerHTML = this.tasks.map(task => `
                    <div class="task-card" data-id="${task.id}">
                        <div class="task-info">
                            <div class="task-title">${task.title}</div>
                            <div class="task-meta">
                                <span class="priority priority-${task.priority}">${this.getPriorityText(task.priority)}</span>
                                <span class="status status-${task.status}">${this.getStatusText(task.status)}</span>
                                <span>截止日期: ${task.dueDate}</span>
                            </div>
                        </div>
                        <button class="delete-btn" onclick="showDeleteConfirm(this)">&times;</button>
                    </div>
                `).join('');
            }

            // 排序任务
            sortTasks(sortType) {
                switch(sortType) {
                    case '按时间排序':
                        this.tasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
                        break;
                    case '按优先级排序':
                        const priorityOrder = { high: 3, medium: 2, low: 1 };
                        this.tasks.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority]);
                        break;
                    case '按状态排序':
                        const statusOrder = { todo: 1, doing: 2, done: 3 };
                        this.tasks.sort((a, b) => statusOrder[b.status] - statusOrder[a.status]);
                        break;
                }
                this.renderTasks();
                this.saveTasks();
            }

            // 显示添加任务模态框
            showAddTaskModal() {
                const modal = document.createElement('div');
                modal.className = 'modal';
                modal.innerHTML = `
                    <div class="modal-content">
                        <h2>添加新任务</h2>
                        <form id="addTaskForm">
                            <div class="form-group">
                                <label>任务标题</label>
                                <input type="text" name="title" required>
                            </div>
                            <div class="form-group">
                                <label>优先级</label>
                                <select name="priority" required>
                                    <option value="high">高优先级</option>
                                    <option value="medium">中优先级</option>
                                    <option value="low">低优先级</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>状态</label>
                                <select name="status" required>
                                    <option value="todo">未开始</option>
                                    <option value="doing">进行中</option>
                                    <option value="done">已完成</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>截止日期</label>
                                <input type="date" name="dueDate" required>
                            </div>
                            <div class="form-buttons">
                                <button type="submit">添加</button>
                                <button type="button" class="cancel-btn">取消</button>
                            </div>
                        </form>
                    </div>
                `;
                document.body.appendChild(modal);

                // 绑定表单提交事件
                const form = modal.querySelector('#addTaskForm');
                form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    const formData = new FormData(form);
                    const task = {
                        title: formData.get('title'),
                        priority: formData.get('priority'),
                        status: formData.get('status'),
                        dueDate: formData.get('dueDate')
                    };
                    this.addTask(task);
                    document.body.removeChild(modal);
                });

                // 绑定取消按钮事件
                const cancelBtn = modal.querySelector('.cancel-btn');
                cancelBtn.addEventListener('click', () => {
                    document.body.removeChild(modal);
                });
            }

            // 获取优先级文本
            getPriorityText(priority) {
                const texts = {
                    high: '高优先级',
                    medium: '中优先级',
                    low: '低优先级'
                };
                return texts[priority];
            }

            // 获取状态文本
            getStatusText(status) {
                const texts = {
                    todo: '未开始',
                    doing: '进行中',
                    done: '已完成'
                };
                return texts[status];
            }
        }

        // 初始化任务管理器
        const taskManager = new TaskManager();
    </script>
</body>
</html>
